iT邦幫忙

4

[JS學習筆記] 搞死人的split( ) slice( ) splice( ) | 我在路易莎的日子

  • 分享至 

  • xImage
  •  

最近在複習JS的時候,常對一些長得很像的東西感到困擾 @~@
像是等等要介紹的S三姐妹 split( )slice( )splice( )
這三個真的有點像在玩文字遊戲啊!!!!不過各自還是有點差別的,那就來一一破解吧/images/emoticon/emoticon28.gif


1. String.prototype.split( )

The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.

1-1 解釋:
split()把原字串依照指定的符號分割成子字串,並放入陣列中回傳

1-2 特點:

  • 會回傳一個陣列,並以逗號隔開每個元素
  • 想要把字串轉換為陣列時可使用

1-3 語法:
https://ithelp.ithome.com.tw/upload/images/20220906/20149362vm8Aly8U9y.png
本圖擷取自MDN

  • separator(選填): 字串分割符,如果沒有定義,會把原字串直接放入陣列中回傳["......"]
  • limit(選填): 限制拆分後的個數要有幾個,可以是0或正整數,若是0,會返回一個空陣列[ ]

1-4 示範:

/*split()*/
let str = "Happy day Happy life."
let arr = str.split(" ")  //以"空格"分割字串
console.log(arr); /*["Happy","day","Happy","life."]*/

arr = str.split(" ",0) 
console.log(arr);/*[]*/

點我看DEMO


2. Array.prototype.slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

2-1 解釋:
slice在中文中有切片的意思,slice()可以想像成從哪裡開始去切,會回傳一個新的陣列,為原陣列 start 至 end(不含 end)部分的淺拷貝(shallow copy),而原本的陣列並不會被修改

2-2 語法:
https://ithelp.ithome.com.tw/upload/images/20220907/20149362yrqoTlK4mm.png
本圖擷取自MDN

  • start(選填): 起始點,預設值為0,可以是負數,如果大於陣列的索引範圍,會返回一個空陣列
  • end(選填):終點,不包含end本身,預設值為陣列長度,若end值設大過陣列的長度,則仍以陣列長度為基準

2-3 特點:

  • 不會改變原陣列,而是會回傳一個新的陣列
  • 切分的區域只包含起點start,不包含終點end

2-4 示範:

/*slice()*/
let arr2 = ["I","have","to","sleep","It\'s","1:25","a.m."]
console.log(arr2.slice(5)); /*["1:25","a.m."]*/
console.log(arr2.slice(1,-1)) /*["have","to","sleep","It's","1:25"]*/
console.log(arr2.slice(1,7)) /*["have","to","sleep","It's","1:25","a.m."]*/

點我看DEMO


3. Array.prototype.splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place(原地演算法).

3-1 解釋:
splice() 可以透過移除(removing)、替換(replacing)或是新增(adding)元素的方式來改變陣列的內容

3-2 語法:
https://ithelp.ithome.com.tw/upload/images/20220906/20149362lWObs9gDNT.png
本圖擷取自MDN

  • start(必填): 起始位子,從0開始,如果大於陣列的長度,那麼會新增此元素在最後頭
  • deleteCount(選填): 刪除的元素個數,deleteCount 為 0 或是負數,則不會有元素被刪除
  • item1…itemN(選填): 欲新增的元素名稱

3-3 特點:

  • 會改變原陣列
  • 常使用在使用者與陣列中的資料互動

3-4 示範:

/*splice()*/
const season = ['spring', 'summer', 'winter'];
season.splice(2, 0, 'autumn');
          //從第二個開始 刪除0個 增加autumn
console.log(season); //["spring","summer","autumn","winter"]

season.splice(3,1,'Hello Winter');
console.log(season);  
/* ["spring","summer","autumn","Hello Winter"]*/

點我看DEMO


Summary 總結

方法 說明
split(separator,limit) 字串處理方法,回傳一個陣列
slice(start,end) 陣列處理方法,回傳一個新的陣列
splice(start,deleteCount,itim...) 陣列處理方法,回傳一個陣列(我都想像成原陣列的Before/After)


以上是我自己的學習筆記,除了日後可以給自己看,也希望能幫助到有需要的人^ ^ 所學不精,若有解說不詳盡、錯誤之處歡迎指教,阿哩嘎都/images/emoticon/emoticon41.gif


參考資料

MDN-split()
MDN-splice()
MDN-slice()
深拷貝與淺拷貝


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言